<template>
    <div class="currencyPop">
        <header class="currencyPop-header">
            <p class="font-34 mb-40">请选择</p>
            <van-field v-model="value" placeholder="搜索" class="currencyPop-search" @input="search"/>
        </header>
        <main class="currencyPop-main">
            <div class="main-box" v-for="item in list" :key="item.symbol" @click="getCurrency(item)">
                <img class="box-img" :src="`${HOST_URL}/symbol/${item.symbol.toLowerCase()}.png`" @error="handleImageError"/>
                <p class="font-36 font-600 px-10">{{ item.symbol.toLocaleUpperCase() }}</p>
            </div>
        </main>
    </div>
</template>

<script>
import { Field } from 'vant';
import { HOST_URL } from '@/config';
import defaultImage from '@/assets/loading-default.png';
export default {
    components:{
        [Field.name]:Field,
    },
    props:{
        currencyList:{
            type:Array,
            default:()=>[],
        },
    },
    data() {
        return {
            value:'',
            HOST_URL,
            defaultImage,
            list:[],
        }
    },
    watch:{
        currencyList:{
            handler(newVal){
                this.list = [...newVal];
            },
            immediate:true,
        }
    },
    methods: {
        handleImageError(event){
            event.target.src = this.defaultImage;
        },
        search(val){
            const regex = new RegExp(val, 'gi');
            this.list = this.currencyList.filter(item=>{
                return regex.test(item.symbol)
            })
        },
        getCurrency(data){
            this.$emit('getCurrency',data);
        }
    },
}
</script>

<style lang="scss" scoped>
.currencyPop{
    ::v-deep .currencyPop-header{
        text-align: center;
        margin-bottom: 40px;
        .currencyPop-search{
            border: 1px solid #DADADA;
            border-radius: 44px;
            padding: 0 20px;
        }
    }
    .currencyPop-main{
        display: flex;
        flex-direction: column;
        gap: 20px;
        .main-box{
            height: 100px;
            width: 100%;
            background-color: #fafafa;
            display: flex;
            align-items: center;
            padding: 20px;
            box-sizing: border-box;
            border-radius: 32px;
            .box-img{
                width: 48px;
                height: 48px;
            }
        }
    }
}
</style>